{extend name="admin@public/base" /}
{block name="main-content"}
<link rel="stylesheet" type="text/css" href="__PUBLIC__/jQuery-Validation-Engine-2.6.2-ciaoca/css/validationEngine.jquery.css">
<script type="text/javascript" src="__PUBLIC__/jQuery-Validation-Engine-2.6.2-ciaoca/js/jquery.validationEngine-zh_CN.js"></script>
<script type="text/javascript" src="__PUBLIC__/jQuery-Validation-Engine-2.6.2-ciaoca/js/jquery.validationEngine.min.js"></script>
<div class="page-content">
    <div class="col-xs-12 col-sm-12 rule-top alert alert-info top10">
        <button type="button" class="close" data-dismiss="alert">
            <i class="ace-icon fa fa-times"></i>
        </button>
        支持rar、zip、pdf、xls、xlsx、doc、docx、jpg、jpeg、png格式
    </div>

    <div class="row">
        <div class="col-xs-12">
            <form class="form-horizontal ajaxForm" name="" method="post" action="{:url('admin/Help/doAdd')}">
                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 模板名称： </label>
                    <div class="col-sm-9">
                        <input type="text" name="name" id="name" placeholder="请输入项目名称" autocomplete="off" class="name col-xs-10 col-sm-5 validate[required]"/><span class="lbl">&nbsp;&nbsp;<span class="red">*</span>必填</span>
                    </div>
                </div>
                <div class="space-4"></div>
                <div class="form-group">
                    <label class="col-sm-3 control-label no-padding-right" for="form-field-1"> 模板说明：  </label>
                    <div class="col-sm-9">
                        <textarea name="content" class="col-xs-10 col-sm-5 content" placeholder="请输入模板说明"></textarea><span class="lbl">&nbsp;&nbsp;
                    </div>
                </div>
                <div class="space-4"></div>
                <div class="form-group" style="margin:0 0 20px 17.8%">
                    <a url="{:url('Upload/index',array('type'=>'schedule','file_type'=>3))}" class="tooltip-error upload" style="color:red" class="action-buttons upload">
                        <i class="ace-icon fa fa-upload bigger-110">上传模板 : </i>
                    </a>
                    <div style="margin:-20px 0 0 100px">
                        <ul class="ace-thumbnails clearfix" id="getpicture">
                            
                        </ul>
                    </div>
                </div>
                <input type="hidden" name="url" value="">
                <div class="space-4"></div>
                <div class="clearfix form-actions">
                    <div class="col-md-offset-3 col-md-9">
                        <button type="submit" class="btn btn-info">
                            <i class="ace-icon fa fa-check bigger-110"></i>
                            保存
                        </button>
                    </div>
                </div> 
            </form>
        </div>
    </div>
</div><!-- /.page-content -->
{/block}
{block name="scripts"}
<script type="text/javascript">
        if('ontouchstart' in document.documentElement) document.write("<script src='__PUBLIC__/assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>

<!-- page specific plugin scripts -->
<script src="__PUBLIC__/assets/js/jquery.colorbox.min.js"></script>

<!-- ace scripts -->
<script src="__PUBLIC__/assets/js/ace-elements.min.js"></script>
<!-- inline scripts related to this page -->
<script>
//file input
$('input[type=file]').ace_file_input()
.closest('.ace-file-input')
.addClass('width-90 inline')
.wrap('<div class="form-group file-input-container"></div>');

$('.form-horizontal').validationEngine('attach',{
        promptPosition: 'bottomLeft',
        addPromptClass: 'formError-white',
        showOneMessage: true
    });

    //删除图片
    function del(va){
        urls = $('.pic_'+va).attr('url');
        $('.pic_'+va).remove();
        val = $("input[name='url']").val();
        vals = val.split(",");
        vals.splice($.inArray(urls,vals),1);
        $("input[name='url']").val(vals);
    }

    //上传
    $('.upload').on('click',function(){
        if($("input[name='url']").val() != ''){
            layer.alert('只能上传一个附件', {icon: 5});
        }else{
            var url = $(this).attr('url');
        var index = layer.open({
            type: 2,
            title: '上传附件',
            content: url,
            area: ['50%', '420px'],
            cancel: function(index, layero){
                // location.reload();
                var data = $(layero).find("iframe")[0].contentWindow.picture;
                if(data){
                    for(var i=0;i<data.length;i++){
                        var num = data[i].lastIndexOf('.');
                        suffix = data[i].substring(num+1,data[i].length).toLowerCase();
                        if(suffix != 'jpg' && suffix !='jpeg' && suffix !='png'){
                            var img = '<li class="pic_'+i+'" url="'+data[i]+'"><a href="__PUBLIC__/uploads/'+data[i]+'"><img src=__PUBLIC__/file-type/'+suffix+'.png width="100" height="100"></a><div class="tools" style="height:25px"><a href="#" onclick="del('+i+')"><i class="ace-icon fa fa-times red"></i></a></div></li>';
                            $("#getpicture").append(img);
                        }else{
                            var img = '<li class="pic_'+i+'" url="'+data[i]+'"><a href="__PUBLIC__/uploads/'+data[i]+'" data-rel="colorbox"><img src=__PUBLIC__/uploads/'+data[i]+' width="100" height="100"></a><div class="tools" style="height:25px"><a href="#" onclick="del('+i+')"><i class="ace-icon fa fa-times red"></i></a></div></li>';
                            $("#getpicture").append(img);
                        }

                        //点击图片放大效果
                        jQuery(function($) {
                            var $overflow = '';
                            var colorbox_params = {
                                rel: 'colorbox',
                                reposition:true,
                                scalePhotos:false,
                                scrolling:true,
                                previous:'<i class="ace-icon fa fa-arrow-left"></i>',
                                next:'<i class="ace-icon fa fa-arrow-right"></i>',
                                close:'&times;',
                                current:'{current} of {total}',
                                maxWidth:'100%',
                                maxHeight:'100%',
                                onOpen:function(){
                                            
                                },
                                onClosed:function(){
                                    document.body.style.overflow = $overflow;
                                },
                                onComplete:function(){
                                    $.colorbox.resize();
                                }
                            };

                            $('.ace-thumbnails [data-rel="colorbox"]').colorbox(colorbox_params);
                            $("#cboxLoadingGraphic").html("<i class='ace-icon fa fa-spinner orange fa-spin'></i>");//let's add a custom loading icon
                            
                            
                            $(document).one('ajaxloadstart.page', function(e) {
                                $('#colorbox, #cboxOverlay').remove();
                           });
                        })
                    }
                    // 把图片地址数组放入隐藏域中
                    $("input[name='url']").val(data);
                }
          } 
        });
        }
        
    });
</script>
{/block}
